<template>
<div class="fwzx" style="text-align: center;  background-image: linear-gradient( #00ffff,#f0f8ff);">
  <h3>服务中心</h3>
  <div class="gn">
      <p>
        <div><van-icon name="/public/客服电话.png"  size="50px" @click="toast"/><br>在线客服</div>
        <div><van-icon name="/public\设备报修.png" size="50px" @click="show"/><br>设备报修
        </div>
        <div><van-icon name="/public\在线客服.png" size="50px" @click="show" /><br>客服电话
        </div>
        <div><van-icon name="https://img0.baidu.com/it/u=4157283043,4234513936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=508" size="50px" @click="toast"/><br>意见反馈</div>
      </p>
  </div>
  <van-popup v-model:show="bx" :style="{ padding: '64px' }" >
           联系电话： 400-015-5599
  </van-popup>
  <div>
    <p>热门问题 </p>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="标题1" name="1">
        代码是写出来给人看的，附带能在机器上运行。
      </van-collapse-item>
      <van-collapse-item title="标题2" name="2">
        技术无非就是那些开发它的人的共同灵魂。
      </van-collapse-item>
      <van-collapse-item title="标题3" name="3">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
    </van-collapse>
  </div>
</div>
<div class="bql">
  <p><van-tabbar v-model="active" active-color="rgb(16, 185, 252)">
    <van-tabbar-item icon="home-o"  url="/">
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.sy" />
      </template>首页</van-tabbar-item>
    <van-tabbar-item icon="search"  url="/fw">
      <template #icon="props" >
        <img :src="props.active ? icon.active : icon.fw " />
      </template>服务</van-tabbar-item>
    <van-tabbar-item icon="friends-o" url="/dd">
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.dd" />
      </template>订单</van-tabbar-item>
    <van-tabbar-item icon="setting-o" url="/my">
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.inactive" />
      </template>我的</van-tabbar-item>
  </van-tabbar></p>
 </div>
</template>

<script>
import { ref } from 'vue';
import { createApp } from 'vue';
import { Icon,showToast,Tabbar, TabbarItem, } from 'vant';


export default {
  setup() {
    const toast=()=>{
      showToast('此功能暂未开放');
    }
 
    const bx = ref(false)
    const active = ref(1);
    const activeNames = ref(['1']);
    const icon = {
      sy:'/public/fangzi.jfif',
      fw:'/public/erji.jfif',
      dd:'/public/dingdan.jfif',
      active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactive:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
    const show=()=>{
      bx.value=true
    }
    return {
      toast,
      bx,
      show,
      activeNames,
      active, 
      Tabbar,
      TabbarItem,
      icon
    };
  },
  components: {
    'van-tabbar': Tabbar,
    'van-tabbar-item': TabbarItem
  }
};
</script>
<style scoped>
.gn {
  background-color: #ffffff;
}
.gn p div {
  display: inline-block;
  margin-left: 5%;
}



.bql {
  position: absolute;
  left: auto;
  right: auto;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 15%;
}
van-tabbar-item {
  display: inline;
  width: 25%;
}
img {
  display: inline;
}
</style>